<template>
  <div class="activity">
    <img
      :src="data.pc_image_text"
      alt=""
      class="headImg"
      @click="toList(data)"
    >
    <div class="activity-box">
      <div
        v-for="(s, index) in seckill.slice(0 , 1)"
        :key="index"
        class="miaosha"
      >
        <!-- <div 
          v-if="index == seckill.length - 1" 
          class="miaosha_s"
        >
          <div class="time">
            <div class="timeDown">
              <span class="hours">{{ hours }}</span>： <span class="minutes">{{ minutes }}</span>：
              <span class="second">{{ seconds }}</span>
            </div>
            <span
              class="getmore"
              @click="goActivityDetail(s)"
            >查看更多&gt;</span>
          </div>
          <div class="goods-list">
            <div
              v-for="g in s.goodsList"
              :key="g.pid"
              class="list-item"
              @click="goDetail(g)"
            >
              <img
                :src="g.defaultAlbum"
                alt=""
              >
              <span class="name">{{ g.pName }}</span>
              <span class="price">￥{{ g.fSalePrice }}</span>
            </div>
          </div>
        </div> -->
        <div class="top-other_item">
          <div class="title_1">
            秒杀/时段促销
          </div>
          <div class="title_2">
            Reduction-Big Sale
          </div>
          <div class="title_3">
            <img src="../../assets/img/active_ico.png">
          </div>
          <div class="title_4">
            <div class="timeDown">
              <span class="hours">{{ hours }}</span>： <span class="minutes">{{ minutes }}</span>：
              <span class="second">{{ seconds }}</span>
            </div>
          </div>
          <div class="title_5">
            <span @click="goActivityDetail(s)">查看更多▶</span>
          </div>
        </div>
        <div
          v-for="(item, str) in s.goodsList" 
          :key="str"
          class="top-other_item"
          @click="goDetail(item)"
        >
          <!-- <div class="tag">秒杀</div> -->
          <div class="goods-img">
            <img
              :src="item.defaultAlbum"
              alt=""
            >
          </div>
          <div class="goods-info">
            <div class="name">
              {{ item.pName }}
            </div>
            <div class="price">
              ￥{{ item.fSalePrice }}
            </div>
          </div>
        </div>
      </div>
      <div class="activity-row">
        <img
          :src="maizeng.cover"
          alt=""
          class="a-row-1"
          @click="toList(maizeng)"
        >
        <img
          :src="taocan.cover"
          alt=""
          class="a-row-2"
          @click="toList(taocan)"
        >
      </div>
      <div class="activity-row">
        <img
          :src="jifen.cover"
          alt=""
          class="a-row-2"
          @click="toList(jifen)"
        >
        <img
          :src="pintuan.cover"
          alt=""
          class="a-row-1"
          @click="toList(pintuan)"
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {
    data: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      seckill: [],
      maizeng: {},
      taocan: {},
      jifen: {},
      pintuan: {},
      bannerlist: [],
      timer: null,
      hours: "00",
      minutes: "00",
      seconds: "00",
    };
  },
  mounted() {
    this.getBanner(); //活动封面
    this.getActivity(1); //秒杀
    this.getActivity(3); //买赠
    this.getActivity(7); //套餐
    this.getActivity(11); //积分
    this.getActivity(2); //团购
  },
  methods: {
    getActivity(type) {
      let that = this;
      let params = {
        type: type,
      };
      this.$api.home.getPricePreferentialList(params).then((res) => {
        if (res.code == 200) {
          switch (type) {
            case 1:
              if (res.data.data.length > 0) {
                res.data.data.forEach((item) => {
                  that.getList(item, that.seckill);
                });
                that.timeDown();
              }
              break;
            case 3:
              if (res.data.data.length > 0) {
                that.maizeng = res.data.data[0];
                that.bannerlist.forEach((item) => {
                  if (item.type == type) {
                    that.$set(that.maizeng, "cover", item.pc_image);
                    that.$set(that.maizeng, "type", item.type);
                  }
                });
              }
              break;
            case 7:
              if (res.data.data.length > 0) {
                that.taocan = res.data.data[0];
                that.bannerlist.forEach((item) => {
                  if (item.type == type) {
                    that.$set(that.taocan, "cover", item.pc_image);
                    that.$set(that.taocan, "type", item.type);
                  }
                });
              }
              break;
            case 11:
              if (res.data.data.length > 0) {
                that.jifen = res.data.data[0];
                that.bannerlist.forEach((item) => {
                  if (item.type == type) {
                    that.$set(that.jifen, "cover", item.pc_image);
                    that.$set(that.jifen, "type", item.type);
                  }
                });
              }
              break;
            case 2:
              if (res.data.data.length > 0) {
                that.pintuan = res.data.data[0];
                that.bannerlist.forEach((item) => {
                  if (item.type == type) {
                    that.$set(that.pintuan, "cover", item.pc_image);
                    that.$set(that.pintuan, "type", item.type);
                  }
                });
              }
              break;
          }
        }
      });
    },
    getBanner() {
      this.$api.home.preferentialAds({}).then((res) => {
        if (res.code == 1) {
          this.bannerlist = res.data;
        }
      });
    },
    //跳转活动详情
    goActivityDetail(item) {
      this.$router.push({
        path: "/activityList?id=" + item.id + "&endDate=" + item.pEndDate,
      });
    },
    getList(item, arr) {
      let params = {
        queryCondition: {
          order: [
            {
              fieldname: "iOrder",
              direction: "asc",
            },
          ],
          pageindex: 1,
          pagesize: 3,
          where: [
            {
              fieldname: "promotionActivityId",
              valuefrom: "PP" + item.id,
            },
          ],
        },
      };

      this.$api.home.getProductList(params).then((res) => {
        if (res.code == 200) {
          this.$set(item, "goodsList", res.data.data);
        }
      });
      arr.push(item);
    },
    //跳转商品详情
    goDetail(item) {
      this.$router.push({
        path: "/fruit/detail",
        query: {
          id: item.pid,
          iShopId: item.iShopId
        },
      });
    },
    //跳转活动商品列表
    toList(item) {
      if (item.connect_id) {
        this.$router.push({
          path:
            "/fruit?activityid=" +
            item.connect_id +
            "&type=" +
            item.active_type,
        });
      } else {
        this.$router.push({
          path: "/fruit?activityid=" + item.id + "&type=" + item.type,
        });
      }
    },
    timeDown() {
      // 倒计时

      clearInterval(this.timer);
      // var starttime = new Date(this.seckill[0].pStartDate.replace(/-/g, "/")) / 1000;
      var nowDate = Math.round(new Date() / 1000); // 当前时间
      //var endtime = Number(this.initActiveMsgObj.end_time);
      var endtime =
        new Date(this.seckill[0].pEndDate.replace(/-/g, "/")) / 1000;
      // endtime = Math.round(new Date('2019/7/10 14:56:00') / 1000); + 60;
      if (endtime < nowDate) {
        return;
      }

      var totalSeconds = parseInt(endtime - nowDate); // 相差的总秒数
      //天数
      var days = Math.floor(totalSeconds / (60 * 60 * 24));
      //取模（余数）
      var modulo = totalSeconds % (60 * 60 * 24);
      //小时数
      var hours = Math.floor(modulo / (60 * 60));
      hours = hours < 10 ? "0" + hours : hours;
      modulo = modulo % (60 * 60);
      //分钟
      var minutes = Math.floor(modulo / 60);
      minutes = minutes < 10 ? "0" + minutes : minutes;
      //秒
      var seconds = modulo % 60;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      //输出到页面
      // this.times = hours + ':' + minutes + ':' + seconds;
      this.hours = hours * 1 + days * 24;
      this.minutes = minutes;
      this.seconds = seconds;
      //if(totalSeconds <= 0){
      if (totalSeconds <= 60) {
        clearInterval(this.timer);
        // window.location.reload()
      } else {
        this.timer = setInterval(this.timeDown, 1000);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.activity {
  display: flex;
  flex-direction: column;

  & > img {
    width: 100%;
    object-fit: contain;
    cursor: pointer;
  }

  .activity-box {
    padding: 0 10rem;
    margin-top: 2.19rem;
    display: flex;
    flex-direction: column;

    .miaosha {
      display: flex;
      // .miaosha_s{
      //   display: flex;
      // }
      .miaosha-img {
        // width: 100%;
        width: 19.69rem;
      }
      .top-other_item{
        display: flex;
        height: 29.5rem;
        width: 23%;
        flex-direction: column;
        justify-items: center;
        justify-content: center;
        background: #fff;
        align-items: center;
        margin-left: 2.5rem;
        cursor: pointer;
        .tag{
          display: flex;
        }
        .title_1{
          color: #fff;
          font-size: 1.4rem;
          font-weight: 400;
          display: flex;
          height: 2rem;
          align-items: center;
        }
        .title_2{
          color: #fff;
          font-size: 1.4rem;
          font-weight: 400;
          display: flex;
          height: 2rem;
          align-items: center;
        }
        .title_3{
          display: flex;
          height: 10rem;
          align-items: center;
          img{
            height: 4rem;
            width: 3rem;
          }
        }
        .title_4{
          display: flex;
          height: 3rem;
          align-items: center;
          .timeDown{
            color: #fff;
            span{
              background: #333333;
              padding: .5rem 1rem;
            }
          }
        }
        .title_5{
          display: flex;
          height: 5rem;
          align-items: center;
          color: #fff;
          font-size: .8rem;
          span{
            background: #333333;
            padding: .5rem 1rem;
            cursor: pointer;
          }
        }
        .goods-img {
          width: 100%;
          height: 18rem;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #fff;

          img {
            width: 15rem;
            height: 15rem;
            object-fit: contain;
          }
        }

        .goods-info {
          display: flex;
          flex-direction: column;
          text-align: center;
          padding: 0 1rem;
          .name {
            font-size: 1.13rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(4, 0, 0, 1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 18rem;
          }
          .price {
            font-size: 1.5rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(243, 64, 111, 1);
            margin-top: 0.94rem;
          }
          .promotion{
            font-size: .8rem;
            display: flex;
            width: 2rem;
            padding: .2rem 1rem;
            color: rgba(243, 64, 111, 1);
            align-items: center;
            border-radius: 1rem;
            margin-top: 1rem;
            border: 1px solid  rgba(243, 64, 111, 1);
          }
        }
      }
      .top-other_item:first-child{
        margin-left: 0;
        background: #17c4a6;
        cursor: auto;
      }
      // .time {
      //   width: 19.69rem;
      //   margin-right: 1.25rem;
      //   cursor: pointer;
      //   .getmore {
      //     position: absolute;
      //     bottom: 4.06rem;
      //     left: 50%;
      //     transform: translate(-50%, -50%);
      //     width: 6.94rem;
      //     height: 1.75rem;
      //     background: #000000;
      //     display: flex;
      //     justify-content: center;
      //     align-items: center;
      //     font-size: 0.88rem;
      //     font-family: Microsoft YaHei;
      //     font-weight: 400;
      //     color: #ffffff;
      //   }
      //   .timeDown {
      //     display: flex;
      //     justify-content: center;
      //     align-items: center;
      //     font-size: 1.5rem;
      //     color: #000;
      //     font-weight: bold;
      //     span {
      //       width: 3.31rem;
      //       height: 2.25rem;
      //       background: #000000;
      //       display: inline-flex;
      //       justify-content: center;
      //       align-items: center;
      //       font-size: 1.5rem;
      //       font-family: Microsoft YaHei;
      //       font-weight: 400;
      //       color: #ffffff;
      //       margin-right: 0.5rem;
      //     }
      //   }
      // }

      // .goods-list {
      //   display: flex;

      //   .list-item {
      //     background: #fff;
      //     display: flex;
      //     flex-direction: column;
      //     align-items: center;
      //     padding: 1rem;
      //     margin-left: 1rem;
      //     cursor: pointer;

      //     img {
      //       width: 12rem;
      //       height: 12rem;
      //       object-fit: contain;
      //     }

      //     .name {
      //       margin-top: 6.81rem;
      //       font-size: 1.13rem;
      //       font-family: Microsoft YaHei;
      //       font-weight: bold;
      //       color: rgba(51, 51, 51, 1);
      //     }

      //     .price {
      //       margin-top: 1.94rem;
      //       font-size: 1.5rem;
      //       font-family: Microsoft YaHei;
      //       font-weight: bold;
      //       color: rgba(243, 64, 111, 1);
      //     }
      //   }
      // }
    }

    .activity-row {
      margin-top: 1.25rem;
      display: flex;
      justify-content: space-between;
      height: 19.25rem;

      .a-row-1 {
        width: 60%;
        height: 100%;
        cursor: pointer;
      }

      .a-row-2 {
        width: 38.5%;
        height: 100%;
        cursor: pointer;
      }
    }
  }
}
</style>
